<template>
  <div class="ApplySale">
    <div class="demo-nav">
      <div class="demo-nav__title">选择服务类型</div>
      <svg viewBox="0 0 1000 1000" class="demo-nav__back" @click="toBack">
        <path fill-rule="evenodd" fill="#969799" d="M296.114 508.035c-3.22-13.597.473-28.499 11.079-39.105l333.912-333.912c16.271-16.272 42.653-16.272 58.925 0s16.272 42.654 0 58.926L395.504 498.47l304.574 304.574c16.272 16.272 16.272 42.654 0 58.926s-42.654 16.272-58.926 0L307.241 528.058a41.472 41.472 0 0 1-11.127-20.023z"></path>
      </svg>
    </div>
    <div class="ApplySale-demo">
      <van-row>
        <van-col span="7"><van-image width="5rem" height="5rem" fit="cover" :src="list.picUrl"/></van-col>
        <van-col span="15" style="text-align: left">
          <p>{{list.productName}}</p>
          <P style="color: #cccccc;font-size: 0.6rem;padding-top: 0.5rem">{{list.labelName}},{{list.labelUnit}}</P>
        </van-col>
      </van-row>
      <van-cell title="我要退货退款" icon="shop-o" align="left" @click="toReturnRefund">
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <template #right-icon>
          <van-icon name="arrow" class="search-icon" />
        </template>
      </van-cell>
      <van-cell title="我要换货" icon="shop-o" align="left" @click="toExchangeGoods">
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <template #right-icon>
          <van-icon name="arrow" class="search-icon" />
        </template>
      </van-cell>
    </div>
  </div>
</template>

<script>
  export default {
    name: "ApplySale",
    data(){
      return{
        //商品的信息
        list:{},

      }
    },
    created() {
      this.list = JSON.parse(sessionStorage.getItem('list'));

    },
    methods:{
      toBack(){
        this.$router.go(-1);//返回上一层
      },
      toReturnRefund(){
        sessionStorage.setItem('list',JSON.stringify(this.list));
        this.$router.push({path:"/ReturnRefund"});
      },
      toExchangeGoods(){
        sessionStorage.setItem('list',JSON.stringify(this.list));
        this.$router.push({path:"/ExchangeGoods"});
      }
    }
  }
</script>

<style scoped>
  .demo-nav{
    position: relative;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    height: 56px;
    background-color: #fff;
    font-size: 1.1rem;
  }
  .demo-nav__back{
    position: absolute;
    top: 16px;
    left: 16px;
    width: 24px;
    height: 24px;
    cursor: pointer;
  }
  .ApplySale-demo{
    padding: 0.5rem;
  }
  .custom-title {
    margin-right: 4px;
    vertical-align: middle;
  }

  .search-icon {
    font-size: 16px;
    line-height: inherit;
  }
</style>
